<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* a:link{
            color: coral;
        } */

        /* 访问过 */
        /* a:visited{
            color: chartreuse;
        } */

        /* 鼠标浮上去 */
        /* a:hover{
            color: aqua;
        } */

        /* 点击 */
        /* a:active{
            color: yellow;
        } */

        /* .child{
            height: 100px;
        } */

        /* .red{
            background-color: red;
        } */

        /* .yellow{
            background-color: yellow;
        } */

        /* .blue{
            background-color: blue;
        } */

        /* .parent>div:first-child{
            background-color: aqua;
        } */

        /* odd 奇数 even 偶数 */
        /* .parent>div:nth-child(2){
            background-color: aqua;
        } */

        /* 伪元素 */
        .content::before{
            content: 'before ';
            background-color: aqua;
            height: 100px;
        }

        .content::after{
            content: ' after';
        }

        /* visiable 可见的 hidden 隐藏  scroll 滚动*/
        /* 不定义高度 文字撑开框 */
        /* .main{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            overflow: scroll;
        } */

        .div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            top: 20px;
            z-index: 2;
        }

        .div2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: relative;
            z-index: 1;
        }

    </style>
</head>
<body>
    <!-- <a href="#">test</a>
    <a href="#1">test</a>

    <div class="parent">
        <div class="child red"></div>
        <div class="child yellow"></div>
        <div class="child blue"></div>

    </div> -->

    <!-- <div class="content">content</div> -->

    <!-- <div class="main">
        We are banyuan collage of IT education
    </div> -->

    <div class="div1"></div>
    <div class="div2"></div>
    
</body>
</html>